<!DOCTYPE html>
<html>
<head>
	<title>八卦图</title>
	<style type="text/css">
		canvas{border:1px solid #333;}
	</style>
</head>
<body>
	<canvas></canvas>
	<script type="text/javascript">
		var canvas=document.querySelector("canvas");
		var ctx=canvas.getContext("2d")
		var R=200;		//大圆半径

		canvas.width=600
		canvas.height=600

		//移动坐标原点
		ctx.translate(300,300)

		//绘制右侧半圆
		ctx.beginPath()
		ctx.arc(0,0,R,-90*Math.PI/180,90*Math.PI/180,false)
		// ctx.stroke()

		//下面小圆
		ctx.arc(0,100,100,90*Math.PI/180,-90*Math.PI/180,true)
		

		//上面半圆
		ctx.arc(0,-100,100,90*Math.PI/180,270*Math.PI/180,false)
		ctx.fillStyle="white"
		ctx.fill()
		ctx.stroke()

		//左侧图形
		ctx.beginPath()
		ctx.arc(0,0,R,270*Math.PI/180,90*Math.PI/180,true)
		
		ctx.arc(0,100,100,90*Math.PI/180,270*Math.PI/180,true)
		ctx.arc(0,-100,100,90*Math.PI/180,270*Math.PI/180,false)
		ctx.fillStyle="black"
		ctx.fill()

		// ctx.strokeStyle="red"
		ctx.stroke()


		//上面最小的黑色圆
		ctx.beginPath()
		ctx.arc(0,-100,30,0,Math.PI*2,false)
		ctx.fillStyle="black"
		ctx.fill()

		//下面最小的白色圆
		ctx.beginPath()
		ctx.arc(0,100,30,0,Math.PI*2,false)
		ctx.fillStyle="white";
		ctx.fill()








	</script>
</body>
</html>